<template>
<Modal v-model="showFlag" :title="'请选择比分'+game_name" width="75">
    <CheckboxGroup v-model="selectScoreGroup" @on-change="selectScoreChange" style="padding-bottom:60px;">
        <Collapse v-for="(kind, index) in selectScoreKinds" value="0">
            <Panel :name="''+index">
                {{kind.title}}
                <Row slot="content" :gutter="8" style="text-align:center;">
                    <Col v-for="label in kind.labels" :xs="{ span: 12 }" :sm="{ span: 8 }" :md="{ span: 6 }" style="margin-bottom:10px;">
                        <Card>
                            <Checkbox :label="label">
                                <span style="font-size: 16px">{{label}}</span>
                            </Checkbox>
                            </br>
                            <div class="testid">
                                权重
                                <Select v-model="all_score[label].weight" :disabled="!all_score[label].value">
                                    <Option v-for="item in [10,20,30,40,50,60,70,80,90,100]" :value="item" :key="item">{{ item }}</Option>
                                </Select>
                                赔率
                                <InputNumber v-model="all_score[label].odds" :min="0" placeholder="赔率" :disabled="!all_score[label].value" style="width:100%"/>
                            </div>
                        </Card>
                    </Col>
                </Row>
            </Panel>
        </Collapse>
    </CheckboxGroup>
    <div slot="footer" style="position:fixed;left:0;bottom:0;background-color:#fff;padding:10px;border-top:1px solid #eee;width:100%;text-align:center;">
        <Button size="large" shape="circle" icon="ios-close-circle" @click="cancelSelect()">取消</Button>
        <Button size="large" shape="circle" icon="ios-checkmark-circle" type="primary" @click="confirmSelect()">确定</Button>
    </div>
</Modal>
</template>

<script>
export default {
    data(){
        return {
            showFlag: false,
            game: { 
                home_team_name: "", // 主队名称
                visiting_team_name: "", // 客队名称
                scores: { // 选择的比分
                    // "1:0": { 
                    //     weight: 10, // 权重
                    //     odds: 0 // 赔率
                    // } 
                } 
            },
			selectScoreGroup: [],
			all_score: {},
			selectScoreKinds:[
				{title: "主胜比分", labels:["1:0", "2:0", "2:1", "3:0", "3:1", "3:2", "4:0", "4:1", "4:2", "5:0", "5:1", "5:2", "胜其它"]},
				{title: "平比分", labels:["0:0", "1:1", "2:2", "3:3", "4:4", "平其它"]},
				{title: "客胜比分", labels:["0:1", "0:2", "1:2", "0:3", "1:3", "2:3", "0:4", "1:4", "2:4", "0:5", "1:5", "2:5", "负其它"]},
			],
        }
    },
    computed:{
		game_name() { // 当前选择的比赛名称
			return this.game ? this.game.home_team_name + '(主)' + " VS " + this.game.visiting_team_name + '(客)' : "";
		}
    },
    methods:{
        showModal(game) {
            this.game = game;
            this.createAllScore();
            this.showFlag = true;
        },
		AlertTipModal(content, tag) { // 错误提示
			tag = tag || 'error'
			this.$Modal[tag]({
				title: "提示",
				content: content,
				width: 200
			});
		},
		createAllScore() { // 生成当前选择比赛的所有比分
			var temp = {};
			var temp2 = [];
			for(var i = 0; i < this.selectScoreKinds.length; i++) {
				var kind = this.selectScoreKinds[i];
				for(var j = 0; j < kind.labels.length; j++) {
					temp[kind.labels[j]] = { weight: 10, odds: 0, value: false };
				}
			}
			if(this.game) {
				for(var k in this.game.scores) {
					temp[k].weight = this.game.scores[k].weight;
                    temp[k].odds = this.game.scores[k].odds;
					temp[k].value = true;
					temp2.push(k);
				}
			}
			this.selectScoreGroup = temp2;
			this.all_score = temp;
		},
		selectScoreChange(values) {
			var temp = {};
			for(var i = 0; i < values.length; i++) {
				temp[values[i]] = true;
			}
			for(var key in this.all_score) {
				var score = this.all_score[key];
				score.value = temp[key] || false;
			}
		},
		cancelSelect(){ // 取消选择比分
			this.showFlag = false;
		},
      	confirmSelect(){ // 确认选择比分
			var temp = {};
			var weight_sum = 0;
			
			for (var i = 0; i < this.selectScoreGroup.length; i++) {
				var label = this.selectScoreGroup[i];
				var score = this.all_score[label];

				if(score.odds == '' || score.odds == '0') {
					this.AlertTipModal("赔率不能为0");
					return;
				}else {
					temp[label] = {
						weight: score.weight,
						odds: score.odds
					}
					weight_sum += score.weight;
				}
			}

			if(weight_sum != 100) {
				this.AlertTipModal("权重和不为100%");
				return;
			}

			this.game.scores = temp;

			this.showFlag = false;
      	},
    },
    created() {
        this.createAllScore();
    }
}
</script>

<style>

</style>

